<template>
  <div :class="{ 'flex-row': mode === 'row', 'flex-column': mode === 'column' }" :style="styles" class="flex-box">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'Flexbox',
  props: {
    gutter: {
      type: [Number, String],
      default: 24
    },
    mode: {
      type: String,
      default: 'row'
    },
    flexWrap: {
      type: String,
      default: 'initial'
    },
    justifyContent: {
      type: String,
      default: 'initial'
    },
    alignItems: {
      type: String,
      default: 'center'
    },
    textAlign: {
      type: String,
      default: 'left'
    }
  },
  computed: {
    styles() {
      return {
        'flex-wrap': this.flexWrap, // 弹性盒子内容是单行或多行
        'justify-content': this.justifyContent, // 弹性盒子项在水平方向的对齐方式
        'align-items': this.alignItems, // 弹性盒子子项在纵轴方向的对齐方式
        'text-align': this.textAlign // 文本的水平对齐方式
      }
    }
  }
}
</script>

<style lang="scss">
.flex-box {
  display: flex; /* 元素显示方式 */
  width: 100%;
  .flex-box-item {
    /*
    弹性盒子的子元素如何分配空间
    flex-grow: 1; 如果只有一个子项是1，则其分配所有剩余空间。如果一项是2，其他项是1，则该项的空间是其余项的两倍。
    flex-shrink: 1; 空间不足时，子项的缩小比例。
    flex-basis: 0%; 分配多余空间之前，项目占据的主轴空间（main size） 。
    */
    flex: 1;
    min-width: 100px;
    &:first-child {
      margin-left: 0 !important;
      margin-top: 0 !important;
    }
  }
}

.flex-row {
  flex-direction: row; /* 主轴的方向：水平方向，起点在左端 */
}

.flex-column {
  flex-direction: column; /* 主轴的方向：垂直方向，起点在上沿 */
  > .flex-box-item {
    width: 100%;
  }
}
</style>
